Component({
  properties: {
    // 是否显示指引
    showGuide: {
      type: Boolean,
      value: false
    },
    // 步骤数据
    steps: {
      type: Array,
      value: [
        {
          imageUrl: 'xxx/xx.jpg',
          text: '欢迎使用本小程序，这是第一步引导说明'
        },
        {
          imageUrl: 'xxx/xx.jpg',
          text: '这是第二步引导说明，介绍主要功能'
        },
        {
          imageUrl: 'xxx/xx.jpg',
          text: '这是第三步引导说明，展示操作方式'
        },
        {
          imageUrl: 'xxx/xx.jpg',
          text: '这是第四步引导说明，提示注意事项'
        },
        {
          imageUrl: 'xxx/xx.jpg',
          text: '这是最后一步，感谢您的阅读！'
        }
      ]
    }
  },

  data: {
    currentStep: 0, // 当前步骤索引
    swiperHeight: 300 // 初始高度
  },

  methods: {
    // 阻止触摸移动（防止页面滚动）
    preventTouchMove: function() {
      return false;
    },

    // 点击遮罩层事件
    onMaskTap: function() {
      // 可以触发事件让父组件处理
      this.triggerEvent('masktap');
    },

    // 下一步按钮点击事件
    nextStep: function() {
      if (this.data.currentStep < this.data.steps.length - 1) {
        this.setData({
          currentStep: this.data.currentStep + 1
        })
        this.triggerEvent('stepchange', { currentStep: this.data.currentStep });
      }
    },

    // swiper滑动事件
    swiperChange: function(e) {
      this.setData({
        currentStep: e.detail.current
      })
      this.triggerEvent('stepchange', { currentStep: e.detail.current });
    },

    // 关闭指引
    closeGuide: function() {
      this.setData({
        showGuide: false
      })
      this.triggerEvent('close');
    },

    // 不再提醒按钮点击事件
    dontRemind: function() {
      wx.setStorageSync('guide_completed', true)
      this.setData({
        showGuide: false
      })
      this.triggerEvent('dontremind');
    },
    
    // 外部调用的方法：显示引导
    show: function() {
      this.setData({
        showGuide: true,
        currentStep: 0
      });
      
      // 计算swiper高度
      const systemInfo = wx.getSystemInfoSync()
      this.setData({
        swiperHeight: systemInfo.windowHeight * 0.4
      });
    },
    
    // 外部调用的方法：隐藏引导
    hide: function() {
      this.setData({
        showGuide: false
      });
    }
  }
})